import { createRouter, createWebHistory } from 'vue-router'

import { useLoginedStore } from '@/stores/logined';

import HomeView from '@/views/HomeView.vue'
import NavigatorView from '@/views/NavigatorView.vue'

// 定义路由记录
const routeRecords = [
  /* 这里的一个 { } 就是一个"路由记录(RouteRecord)"，国内资料上也称作"路由对象"  */
  { 
    path: '/', 
    name: 'root',
    redirect: '/login'
  },
  { 
    path: '/register', 
    name: 'register',
    component: () => import('@/views/RegisterView.vue'),
    meta: {
      title: '用户注册'
    }
  },
  { 
    path: '/login', 
    name: 'login',
    component: () => import('@/views/LoginView.vue'),
    meta: {
      title: '用户登录'
    }
  },
  { 
    path: '/home', 
    name: 'home',
    component: HomeView,
    /* 在一个 路由记录 内通过 children 子路由记录 */
    children: [
      { 
        path: '',
        name: 'home-default', 
        components: {
          sider: NavigatorView,
          content: () => import('@/views/HomeDefault.vue')
        },
        meta: {
          title: '主页'
        }
      },
      { 
        path: 'list',
        name: 'user-list', 
        components: {
          sider: NavigatorView,
          content: () => import('@/views/UserListView.vue')
        },
        meta: {
          title: '用户列表'
        }
      },
      { 
        /** 注意则这里通过路由路径传递参数 */
        path: 'detail/:id',
        name: 'user-detail',
        components: {
          sider: NavigatorView,
          content: () => import('@/views/UserDetailView.vue')
        },
        meta: {
          title: '用户详情'
        }
      },
      /* 下面是 ECharts 使用举例 */
      { 
        /** 注意则这里通过路由路径传递参数 */
        path: 'echarts',
        name: 'echarts',
        components: {
          sider: NavigatorView,
          content: () => import('@/views/EChartsView.vue')
        },
        meta: {
          title: '用户详情'
        }
      },
    ]
  },
];

// 创建"路由器" (需要使用已经定义好的路由记录)
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routeRecords
});

// 全局前置导航守卫
router.beforeEach( (to, from)=> {
  const { path } = to;
  const loginedStore = useLoginedStore();
  // 若用户访问的 登录 或 注册 页面
  if( path === '/login' || path === '/register' ) {
    // 但用于已经登录
    if( loginedStore.logined ) {
      // 则直接将其带到 '/home'
      return '/home'
    }
  }
  // 若用户访问的是 /home 为前缀的路径
  if( path.startsWith('/home') ) {
    // 但用户尚未登录
    if( !loginedStore.logined ) {
      // 则将其带到 登录 页面
      return '/login'
    }
  }
} );

const hook = (to, from) => {
  document.title = to.meta.title;
}

// 全局后置钩子
router.afterEach( hook );

// 导出"路由器"
export default router
